<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!--  테이블 리스트 -->
<div class="ddp-wrap-tablelist">
  <!-- search -->
  <div class="ddp-wrap-list-search">
    <a href="javascript:" class="ddp-btn-refresh" (click)="searchTableTextInit()"></a>
    <div class="ddp-ui-list-search">
      <input type="text" placeholder="{{'msg.bench.ui.search'|translate}}" [(ngModel)]="searchText"
             (keyup.esc)="searchTableTextInit()"
             (keypress)="searchTableText($event)">
      <em class="ddp-btn-search-close" *ngIf="searchText" (click)="searchTableTextInit()"></em>
    </div>
  </div>
  <!-- //search -->

  <!-- head -->
  <div class="ddp-tablelist-header" *ngIf="totalTableElements > 0">
    <!-- ;num -->
    <div class="ddp-table-num">
      <span class="ddp-number">{{totalTableElements}}</span>
      {{'msg.bench.ui.tables' | translate}}
    </div>
    <!-- //num -->
    <!-- table sort -->
    <span class="ddp-table-title" [ngStyle]="{'display': tableSortType == 'DEFAULT' ? '':'none'}"  (click)="tableListSorting('DESC')">
      Physical Table Name
      <a href="javascript:" class="ddp-icon-sort-default"></a>
    </span>
    <span class="ddp-table-title" [ngStyle]="{'display': tableSortType == 'ASC' ? '':'none'}" (click)="tableListSorting('ASC')">
      Physical Table Name
      <a href="javascript:"  class="ddp-icon-sort-asc"></a>
    </span>
    <span class="ddp-table-title" [ngStyle]="{'display': tableSortType == 'DESC' ? '':'none'}"  (click)="tableListSorting('DESC')">
      Physical Table Name
      <a href="javascript:" class="ddp-icon-sort-des"></a>
    </span>
    <!-- //table sort -->
  </div>
  <!-- ///head -->

  <div class="ddp-ui-tablelist">
    <ul class="ddp-list-table">
      <li *ngFor="let item of tables; let index = index" (click)="setTableSql(item)" [class.ddp-info-selected]="selectedTableInfoLayer && index == selectedNum" >
        <em class="ddp-icon-table"></em>
        <span class="ddp-data-tablename" title="{{item}}">{{item}}</span>
        <!-- 버튼 -->
        <div class="ddp-ui-buttons">
          <!-- 클릭시 ddp-selected 추가 -->
          <!--<em class="ddp-icon-info" [ngClass]="{'ddp-disabled':disable}" id="info{{index}}" (click)="showTableInfo(item, index)"></em>-->
          <!-- 클릭시 ddp-selected 추가 -->
          <em class="ddp-icon-tableinfo" [ngClass]="{'ddp-disabled':disable}" id="tableInfo{{index}}" (click)="showTableSchemaInfo(item, index)"></em>
        </div>
        <!-- //버튼 -->
      </li>
    </ul>
    <!-- page -->
    <!-- class 추가 ddp-disabled -->
    <div class="ddp-ui-pageing">
      <a href="javascript:" class="ddp-btn-prev" [ngStyle]="{'display': isDisabledPrev ? 'none':''}"
         *ngIf="pageMode === 'PAGE'" (click)="setPage('prev')">&lt; {{'msg.comm.btn.previous'|translate}}</a>
      <a href="javascript:" class="ddp-btn-prev" [ngStyle]="{'display': isDisabledPrev ? 'none':''}"
         *ngIf="pageMode === 'MEMORY'" (click)="setPageMemory('prev')">&lt; {{'msg.comm.btn.previous'|translate}}</a>

      <div class="ddp-data-page" [ngStyle]="{'display': getTotalPage == 0 ? 'none':''}">
        <span>{{getCurrentPage}}</span>/{{getTotalPage}}
      </div>

      <a href="javascript:" class="ddp-btn-next" [ngStyle]="{'display': isDisabledNext ? 'none':''}"
         *ngIf="pageMode === 'PAGE'" (click)="setPage('next')"> {{'msg.comm.btn.next'|translate}} &gt;</a>
      <a href="javascript:" class="ddp-btn-next" [ngStyle]="{'display': isDisabledNext ? 'none':''}"
         *ngIf="pageMode === 'MEMORY'" (click)="setPageMemory('next')"> {{'msg.comm.btn.next'|translate}} &gt;</a>
    </div>
    <!-- //page -->
  </div>
</div>
<!--  //테이블 리스트 -->


<detail-workbench-table-info-desc
  *ngIf="selectedTableInfoLayer === true"
  [tableParams]="tableParams"
  (showLayer)="tableInfoClose($event)"
  (clickOutside)="selectedTableInfoLayer = false"
  [excludeBeforeClick]="true"
  [exclude]="'.ddp-icon-info'">
</detail-workbench-table-info-desc>

